<template>
	<view class="content">
		<view class="box_show">
			<view class="image-wrapper">
				<view class="t uni-ellipsis" v-if="detail.nav_name">{{detail.nav_name || ''}}</view>
				<view class="box">
					<text class="li"><text class="b">{{detail.video_time || ''}}</text>\n视频有效期</text>
					<text class="li"><text class="b">{{detail.weeks || ''}}周</text>\n课程内容</text>
					<text class="li"><text class="b">{{detail.month || ''}}个月</text>\n教学服务期限</text>
					<text class="li"><text class="b">{{detail.hours || ''}}小时</text>\n视频总时长</text>
				</view>
			</view>
			<view class="padding20">
				<view class="info">
					<view>{{detail.nav_list_title  || ''}}</view>
				</view>
			</view>
		</view>	
		<view class="bor10">
			<uni-segmented-control :current="current" :values="items"  @clickItem="onClickItem" />
		</view>
		<view class="show">
			<view v-show="current === 0">
				<uni-collapse :accordion="true">
					<uni-collapse-item :show-animation="false" :title="item.typename" show-extra-icon="true"  v-for="(item,index) in coursekc" :key="index" >
						<!-- <view class="outline uni-ellipsis" v-show="item" v-for="(itemMsg,indexMsg) in item.downname" :key="indexMsg" @click= "chooseVideo(itemMsg,'/pages/jyclass/video')">
							{{itemMsg.s_name}}
						</view> -->
						
								
						<uni-collapse :accordion="true">
							<uni-collapse-item :show-animation="false" :title="ditem.s_name" show-extra-icon="true"  v-for="(ditem,dindex) in item.downname" :key="dindex" >		
							
								<view class="outline uni-ellipsis" v-if="ditem" v-for="(itemMsg,indexMsg) in ditem.downcouse" :key="indexMsg" @click= "chooseVideo(itemMsg,'/pages/jyclass/video')">
									
									
									{{itemMsg.course_name ||''}}
								</view> 
							</uni-collapse-item>
						</uni-collapse>
						
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view v-show="current === 1">
				<rich-text :nodes="detail.nav_desc_img"></rich-text>
			</view>
			<view v-show="current === 2">
				<view class="p10">	
					<comment :contentId="detail.nav_id"></comment>
				</view>
			</view>
		</view>
		<view class="page-bottom" v-if="detail.is_buy == 0">
			<view class="price"  v-if="detail.nav_price > 0">优惠价<text class="b" >￥{{detail.nav_price || '0.00'}}</text><text class="u">￥{{detail.nav_ori_price || '0.00'}}</text>
			</view>
			<view class="price"  v-else>
				优惠价<text class="b" >￥{{detail.nav_ori_price || '0.00'}}</text>
			</view>
			<view class="btn" @click="navToDetailPage({id:id},'/pages/order/index')">立即购买</view>
			<favorite contentId="1" :ups="content.ups"></favorite>
		</view>
	</view>
</template>

<script>
	import rand from '@/common/random.js'
	import favorite from '@/components/favorite';
	import comment from '@/components/comment';
	import uniSegmentedControl from '@/components/uni-segmented-control/uni-segmented-control.vue';
	import {mapState} from 'vuex';
	
	import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
	export default{
		components: {
			favorite,
			comment,
			uniSegmentedControl,
			uniCollapse,
			uniCollapseItem,
		},
		data() {
			return {
				favorite: true,
				comment:true,
				items: [
					'课程大纲',
					'课程详情',
					'课程评论'
				],
				current: 0,
				exhibitionList:[],
				content:{},
				id: 0,
				coursekc: [], //课程章节列表
				detail: {},//课程信息
				title:"JavaEE零基础入圈班",
				description:"从0基础到一线大型互联网公司流行框架，豪华讲师团手把手打通任督二脉。无论你是未就业的学生还是想转行的在职人员，无需脱产学习，按部就班、华丽转行、圆满入圈！",
				desc: `
					<div style="width:100%">
						<img style="width:100%;display:block;" src="http://www.lezijie.com/public/xcx/img/java.jpg" />
					</div>
				`,
			};
		},
		onLoad(option) {
			if(option && option.id){
				this.id = option.id;
			}
			
		},
		onShow :async function() {
			await this.loadData();
			uni.setNavigationBarTitle({
				title: this.detail.nav_name
			});
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			/* async loadData() {
				let outline = await this.$api.json('outline');
				this.outline = outline;
			}, */
			async loadData() {
				/* let coursekc = await this.$api.json('coursekc');
				this.coursekc = coursekc; */
				
				await this.$http.post('api/common/navdetail',{id: this.id}).then(res=>{
					if(res.code === this.sucCode){
						this.detail = res.data.course_data || {};
						this.coursekc = res.data.xgcourse || [];
						
					}else{
						this.$mHelper.toast(res.msg);
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			
			
			
			
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index
				}
			},
		
			navToDetailPage(item,url) {
				if(item.id){
					url += '?id='+item.id
				}
				this.$mHelper.navTo(url)
				
			},
			previewImage: function(index) {
				var current = index;
				var urls = [];
				this.content.picArr.forEach((ele)=>{
					urls.push(ele.picPaths);
				});
				uni.previewImage({
					current: current,
					urls: urls,
				})
			},
			
			chooseVideo(item,url){
				//判断非免费课程是否购买了课程
				let t = this;
				if(item.free == 0 && t.detail.is_buy == 0){
					uni.showModal({
						title: "您还没有购买课程",
						content: "立即购买",
						showCancel: true,
						confirmText: "确定购买",
						success:(res)=>{
							if(res.confirm){
								t.navToDetailPage({id:t.id},'/pages/order/index')
							}
						}
					})
					return false;
				}
				
				item.nav_id = this.id;
				this.$mRouter.push({route:url,query:item});
			},
		}
		
	}
</script>
<style>
page{padding-bottom: 100upx;}
</style>
